<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<template>
    <div class="menuBox">
        <el-menu default-active="/MemberView">
            <el-menu-item v-for="(item, index) in filteredRoutes" :key="index" :index="item.path" @click="handleClick">
                <el-icon><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
    import { computed } from "vue"
    import routers from "@/router/routers"
    import { useRouter } from "vue-router"
    const router = useRouter()
    console.log(routers)
    interface routerObj {
        index: string,
        active: object,
        indexPath:object
    }
    // 过滤出需要显示的路由
    console.log(routers[0].children.find(r => r.isMenu))
    const filteredRoutes = computed(() => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const arr:any = []
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        routers[0].children.map((item:any)=>{
            if(item.isMenu){
                arr.push(item)
            }
        })
        return arr || []
    })
    console.log(filteredRoutes)
    const handleClick = (obj:routerObj) => {
        console.log(obj)
        console.log(obj.index)
        router.push({ path: obj.index})
    }
</script>

<style lang="less" scoped>
    .menuBox{
        width: 210px;
        height: 100%;
        text-align: center;
    }
</style>